<template>
  <!-- 底部来自 mui 的tabbar-->
  <div>
    <nav class="mui-bar mui-bar-tab">
      <!-- 在路由里面设置linkActiveClass为mui-active 路由激活时变成蓝色-->
      <!-- mui-active是mui提供的，在路由里面把激活类名改成这个就可以了  :to="{path:'/major/home'}"-->
      <a href @click.prevent="tz('home')" class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">外卖</span>
      </a>
      <a class="mui-tab-item" @click.prevent="tz('search')">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">搜索</span>
      </a>
      <a class="mui-tab-item" @click.prevent="tz('order')">
        <span class="mui-icon mui-icon-extra mui-icon-extra-order"></span>
        <span class="mui-tab-label">订单</span>
      </a>
      <a class="mui-tab-item" @click.prevent="tz('my')">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
  </div>
</template>
<script>
export default {
  methods: {
    tz(hash) {
      window.location.hash = '/major/' + hash
    }
  }
}
</script>
<style scoped>
* {
  /*在chrome运行时,mui on监听事件由于目标被视为被动,无法阻止被动事件监听器内的默认,解决方案*/
  touch-action: none;
}
body {
  line-height: 0px;
}
a {
  text-decoration: none !important;
}
.mui-bar-tab .mui-tab-item .mui-icon {
  top: 0px;
}
</style>